<template>
  <el-container class="Home_Style">
    <el-header>
      <span>港口堆存费管理系统</span>
      <el-button @click='logout()' type="info">退出</el-button>
     </el-header>
    <el-container>>
      <el-aside width="200px">
        <el-menu
              background-color="#618aa9"
              text-color="#fff"
              active-text-color="#fd04b"
              :unique-opened="true"
              :router="true">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>管理菜单</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/portform">港口管理</el-menu-item>
                  <el-menu-item index="/fcform">货代管理</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/deliveryform">出库管理</el-menu-item>
                  <el-menu-item index="/enterform">入库管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>查询菜单</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/portquery">港口管理单</el-menu-item>
                  <el-menu-item index="/fcquery">货代管理单</el-menu-item>
                  <el-menu-item index="/delivery">出库管理单</el-menu-item>
                  <el-menu-item index="/enter">入库管理单</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  methods: {
    logout() {
      this.$router.push('/login')
    }
  }
}
</script>

<style>
  .Home_Style{
    height: 100%;
  }
  .el-header{
    background-color: #cfcdcc;
    color: #618aa9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }
  .el-aside{
    background-color: #cfcdcc;
    color: #f5f2f2;
  }
  .el-main{
    background-color: #f7f3f3;
  }
</style>
